<template>
  <el-form ref="userRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="姓名" prop="userName">
          <el-input v-model="form.userName" maxlength="30"/>
      </el-form-item>
      <el-form-item label="手机号码" prop="phonenumber">
          <el-input v-model="form.phonenumber" maxlength="11"/>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" maxlength="50"/>
      </el-form-item>
      <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
              <el-radio value="0">男</el-radio>
              <el-radio value="1">女</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="签名">
          <el-upload
              class="avatar-uploader"
              :headers="uploadSign.headers"
              :action="uploadSign.url"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              name="signfile"
          >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" alt=""/>
              <el-icon v-else class="avatar-uploader-icon">
                  <Plus/>
              </el-icon>
          </el-upload>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="submit">保存</el-button>
          <el-button type="danger" @click="close">关闭</el-button>
      </el-form-item>
  </el-form>
</template>

<script setup>
import {updateUserProfile} from "@/api/system/user";
import {Plus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {getToken} from "@/utils/auth.js";
import useUserStore from "@/store/modules/user.js";


const userStore = useUserStore()
const props = defineProps({
  user: {
      type: Object
  }
});

const {proxy} = getCurrentInstance();

const form = ref({});
const rules = ref({
  userName: [{required: true, message: "姓名不能为空", trigger: "blur"}],
  email: [{required: true, message: "邮箱地址不能为空", trigger: "blur"}, {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"]
  }],
  phonenumber: [{
      required: true,
      message: "手机号码不能为空",
      trigger: "blur"
  }, {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"}],
});

/** 提交按钮 */
function submit() {
  proxy.$refs.userRef.validate(valid => {
      if (valid) {
          updateUserProfile(form.value).then(response => {
              proxy.$modal.msgSuccess("修改成功");
              props.user.phonenumber = form.value.phonenumber;
              props.user.email = form.value.email;
          });
      }
  });
}

/** 关闭按钮 */
function close() {
  proxy.$tab.closePage();
}

const imageUrl = ref('')
// 回显当前登录用户信息
watch(() => props.user, user => {
  if (user) {
      form.value = {userName: user.userName, phonenumber: user.phonenumber, email: user.email, sex: user.sex};
      imageUrl.value = import.meta.env.VITE_APP_BASE_API + user.signPath;
      userStore.signPath = imageUrl.value;
  }
}, {immediate: true});

const uploadSign = reactive({
  // 设置上传的请求头部
  headers: {Authorization: "Bearer " + getToken()},
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + `/system/user/profile/upload_sign`
});

const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
}

const beforeAvatarUpload = (rawFile) => {

  if (rawFile.size / 1024 / 1024 > 2) {
      ElMessage.error('Avatar picture size can not exceed 2MB!')
      return false
  }

  return true
}
</script>


<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
